<template>
	<view>
		<u-toast ref="uToast" />
		<view class="navStyle">
			<u-navbar :is-back="false" z-index=999 title="" :background="background">
				<view class="slot-wrap" @tap="goBack">
					<u-icon name="close" margin-left="30rpx" label="回复" label-size="50" color="#000000" size="40"></u-icon>
				</view>
				<!-- 设置监听输入框输入数字的时候变绿否则禁用 -->
				<text style="margin-left: 420rpx;font-size:50rpx;color: #19BE6B;" @tap="send">发送</text>
			</u-navbar>
		</view>

		<view class="content">
			<u-sticky>
				<!-- 只能有一个根元素 -->
				<view class="sticky u-line-1">
					{{title}}
				</view>
			</u-sticky>
			<textarea :value="reply.answerContent" class="textStyle" placeholder="请输入回复内容" auto-height maxlength=500 @input="onInput"></textarea>
		</view>
	</view>
</template>

<script>
	// 指定
	import {
		save
	} from "@/api/modules/commentarea";
	
	export default {
		data() {
			return {
				id:'',
				background: {
					backgroundColor: '#F3F4F6',
					backgroundImage: 'linear-gradient(45deg,#c2e9fb,#a1c4fd)'
				},
				reply:{
					answerUserEmail:'',
					answerContent:'',
					proposeQuestionId:''
				},
				comment:{},
			}
		},
		methods: {
			send() {
				//console.log('内容发送')
				if(this.reply.answerContent == ""){
					this.$refs.uToast.show({
						title: '输入内容为空，无法发送',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'error', 
						// 如果不需要图标，请设置为false
						icon: false
					})
				}
				else if(this.reply.userEmail == ""||this.reply.commentId == ""){
					this.$refs.uToast.show({
						title: '获取主题出错，请退出登录',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'error', 
						// 如果不需要图标，请设置为false
						icon: false
					})
				}
				else{
					this.reply.answerUserEmail = uni.getStorageSync('userEmail'),
					this.reply.proposeQuestionId = uni.getStorageSync('comment').questionId,
					//console.log("回复的问题ID是多少"+this.reply.proposeQuestionId)
					save(this.reply)
						.then(resp => {
							uni.setStorageSync('replyTimes',resp.data.replyTimes)
							//console.log("现在的评论数"+resp.data.replyTimes)
							this.$refs.uToast.show({
								title: '回复成功',
								// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
								type: 'success', 
								// 如果不需要图标，请设置为false
								duration:'1000',
								back :true
							})
						})
						.catch(resp => {
						})
				}
				
			},
			goBack(){
				uni.navigateTo({
				    url: 'commentDetail',
					fail() {
						uni.navigateBack(1)
					}
				});
			},
			onInput(e){	
				this.reply.answerContent=e.detail.value
				//console.log(this.reply.answerContent)
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		  let that  = this
			that.title = uni.getStorageSync('comment').questionTitle
		    }
	}
</script>

<style>
	.slot-wrap {
		display: flex;
		align-items: center;
		margin-left: 30rpx;

		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}
	.content {
		margin-right: 37rpx;
		height: 1000rpx;
	}

	.navStyle {
		display: block;
		background-color: #F29100;
		z-index: 999;
	}

	.sticky {
		margin-top:10rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		width: 750rpx;
		height: 75rpx;
		background-color: #FDF6EC;
		font-size: 40rpx;
		line-height: 75rpx;
		color: #2c3e50;
	}
	.textStyle{
		margin-top: 10rpx;
		margin-left: 15rpx;
		width: 730rpx;
	}
</style>
